<template>
	<view>
		<u-navbar :is-back="false" title="领货单审核"
		  title-size="30"
		  :background="{background:'#2B88FE' }"
		  title-color="#fff">
		  <div class="head_icon">
		    <u-icon @click="$api.handleBackTo"
		      name="arrow-left" color="#fff"
		      size="36">
		    </u-icon>
		    <u-icon @click="$api.handleHomeTo"
		      name="home" color="#fff" size="36">
		    </u-icon>
		  </div>
		</u-navbar>
		
  <div class="app-draw-add">
    <view class="app-head">
      <u-dropdown
        ref="uDropdown">
        <u-dropdown-item
          :title="className"
          :options="types"
          @change="classChange">
        </u-dropdown-item>
      </u-dropdown>
      <u-search
        v-model="form.Key"
        @change="changeSearch">
      </u-search>
    </view>
    <u-empty text="暂无数据"
      mode="list"
      v-if="!list.length">
    </u-empty>
    <div v-else>
      <div
        class="draw-content">
        <appProduct
          v-for="(v,i) in list"
          :key="i" :li="v"
          @detailUrl="$api.navigator('/pages/sale/my_product_item?id='+v.fId)">
          <view slot="cell"
            class="u-flex">
            <span class="wei"
              v-if="v.fCountWarning">缺货预警</span>
            <span class="wei"
              v-if="v.fExtWarning">临期预警</span>
          </view>
        </appProduct>
      </div>
    </div>
  </div>
</view></template>

<script>
import appProduct from '@/components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
      className: '筛选',
      isAllList: true,
      form: {
        Key: '',
        ClassId: 0
      },
      info: {
        InOut: 2,
        iType: 2,
        CarId: 0,
        CarNo: '',
        Info: ''
      },
      page: 1,
      types: [],
      list: []
    }
  },
  onReachBottom() {
    if (!this.isAllList) return
    this.page += 1
    this.getList()
  },
  methods: {
    classChange(e) {
      this.className = this.types.find(x => x.value === e).label
      this.form.ClassId = e
      this.defaultData(() => {
        this.getList()
      })
    },
    defaultData(cb) {
      this.page = 1
      this.list = []
      this.isAllList = true
      cb && cb()
    },
    changeSearch() {
      this.defaultData(() => {
        this.getList()
      })
    },
    getList() {
      // let userInfo = uni.getStorageSync('user_info')
      // this.form.UserId = userInfo.busbasic.fId
      this.$axios('api/ProBasic/WarListPaged', 'post', { value: this.form, PageIndex: this.page, PageSize: 10 }).then(res => {
        if (!res.Value.List.length) this.isAllList = false

        let list = res.Value.List.map(x => ({
          id: x.fId,
          gname: x.fTitle,
          details: [
            {
              label: '车上库存',
              value: x.fCount
            },
            {
              label: '到期时间',
              value: x.fExTime
            }
          ],
          ...x
        }))
        this.list.push(...list)
      })
    }
  },
  onShow() {
    this.$axios('api/ProClassBasic/GetList', 'post', { value: 0 }).then(res => {
      let list = res.Value.map(x => ({
        label: x.fClassName,
        value: x.fClassId
      }))
      this.types = list
    })
    this.defaultData(() => {
      this.getList()
    })
  }
}
</script>

<style lang="scss" scoped>
.app-draw-add {
  padding-bottom: 70rpx;
  .draw-item {
    .title {
      font-size: 30rpx;
      color: #7f7f7f;
      margin-top: 30rpx;
      margin-left: 30rpx;
    }
  }
  .draw-add {
    color: #007aff;
    font-size: 30rpx;
    padding: 32rpx;
    text-align: center;
  }
  .draw-mark {
    display: flex;
    padding: 0 32rpx;
    u-input {
      flex: 1;
    }
  }
  .footer {
    margin-top: 32rpx;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 2%;
    u-button,
    .u-btn {
      width: 40%;
    }
    u-button + u-button {
      margin-left: 30rpx;
    }
  }
}
</style>